<template>
  <div>
    <div class="head">
      <img :src="'back.png' | imagePath" class="head-back">
      <p>电池商品管理</p>
      <span @click="$.router.push('batteryAdd')">添加</span>
    </div>
    <div class="batteryGoods">
       <div class="batteryGoods-item" v-for="item in ['1','2','3']">
         <div class="batteryGoods-l">
           <img :src="'img3.png' | imagePath"/>
         </div>
         <div class="batteryGoods-r">
           <h1>雅迪电动车48v12A锂电池全新升级能量加码</h1>
           <div class="batteryGoods-data">
             <strong><em>￥</em>888</strong>
             <p>类型: 铅酸</p>
             <p>型号: 48v12vh</p>
           </div>
           <div class="batteryGoods-btn">
             <button>删除</button>
             <button>编辑</button>
             <button class="active">下架</button>
           </div>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{}
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#f6f6f6')
    }
  }
</script>
<style>
  .batteryGoods-item{
    display: flex;
    padding: 0.34rem 0.4rem 0.42rem;
    background-color: #FFFFFF;
    margin-top: 0.26rem;
  }
  .batteryGoods-l img{
    display: block;
    width: 2.24rem;
    height: 2.24rem;
    border-radius: 0.1rem;
    margin-right: 0.34rem;
  }
  .batteryGoods-r{
    flex: 1;
  }
  .batteryGoods-r h1{
    color: #343434;
    font-size: 0.38rem;
    font-weight: 400;
  }
  .batteryGoods-data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.13rem 0;
  }
  .batteryGoods-data strong{
    color: #FF6600;
    font-size: 0.42rem;
  }
  .batteryGoods-data strong em{
    font-size: 0.32rem;
  }
  .batteryGoods-data p{
    font-size: 0.29rem;
    color: #9A9A9A;
  }
  .batteryGoods-btn{
    display: flex;
    justify-content: flex-end;
    margin-top: 0.26rem;
  }
  .batteryGoods-btn button{
    background-color: #FFFFFF;
    border: 1px solid #6EC5C6;
    color: #6EC5C6;
    width: 1.73rem;
    border-radius: 0.34rem;
    font-size: 0.26rem;
    padding: 0.12rem 0;
    margin-left: 0.2rem;
  }
  .batteryGoods-btn button.active{
    background-color: #6EC5C6;
    color: #FFFFFF;
  }
</style>
